<template>
  <div class="info">
    <div class="head">
      <div>
        {{type==1? '新增':'编辑'}}学生信息
      </div>
    </div>
    <div class="block">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="120px">
        <el-form-item label="姓名" prop="name">
          <el-input style="width:250px" v-model="form.name" :maxlength="6"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" required>
          <el-select v-model="form.sex" style="width:250px">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.birth" style="width:250px"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="证件类型" prop="idType" required>
          <el-select v-model="form.idType" style="width:250px">
            <el-option label="身份证" :value="1"></el-option>
            <el-option label="其他证件" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" prop="cardNo">
          <el-input style="width:250px" v-model="form.cardNo"></el-input>
        </el-form-item>
        <area-select :area="area" :type="type"></area-select>
        <el-form-item label="详细地址" prop="address">
          <el-input style="width:250px" v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="级别" prop="gradeYear" required>
          <el-select v-model="gradeYear" style="width:250px" @change="gradeChange">
            <el-option  v-for="item in gradeList" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="classId" required>
          <el-select v-model="classId" style="width:250px">
            <el-option v-for="item in classList" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="学号" prop="infoNo">
          <el-input style="width:250px" v-model="form.infoNo"></el-input>
        </el-form-item> -->
        <el-form-item label="父/母姓名" prop="guardian">
          <el-input style="width:250px" v-model="form.guardian" :maxlength="6"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile" required>
          <el-input style="width:250px" v-model="form.mobile" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="自定义信息1" prop="customField1" style="text-indent:.8em">
          <el-input style="width:250px" v-model="form.customField1"></el-input>
        </el-form-item>
        <el-form-item label="自定义信息2" prop="customField2" style="text-indent:.8em">
          <el-input style="width:250px" v-model="form.customField2"></el-input>
        </el-form-item>
        <el-form-item label="自定义信息3" prop="customField3" style="text-indent:.8em">
          <el-input style="width:250px" v-model="form.customField3"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button type="primary" v-if="type==1" @click="btnSave(1)">保存并新增下一个</el-button>
      <el-button type="primary" v-if="type==1" @click="btnSave(2)">保存</el-button>
      <el-button type="primary" v-if="type==2" @click="btnSave(3)">确定修改</el-button>
      <el-button type="primary" @click="btnSave(4)">取消</el-button>
    </div>
  </div>
</template>
<script>
import {getClassList} from 'api/school/student/index'
import areaSelect from 'components/common/areaSelect'
import common from 'src/util/common'
export default {
  data () {
    let validaPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else {
        if (!(/^1[34578][0-9]{9}$/).test(this.form.mobile)) {
          callback(new Error('请输入正确的11位电话号码'))
        }
        callback()
      }
    }
    let validaSex = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请选择性别'))
      } else {
        callback()
      }
    }
    let validaName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请填写姓名'))
      } else if (!/^[\u2E80-\u9FFF]+$/.test(value)) {
        callback(new Error('姓名格式有误,请输入最多6位汉字'))
      } else {
        callback()
      }
    }
    let validaGuardian = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请填写父/母姓名'))
      } else if (!/^[\u2E80-\u9FFF]+$/.test(value)) {
        callback(new Error('姓名格式有误,请输入最多6位汉字'))
      } else {
        callback()
      }
    }
    let validaIdType = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请选择证件类型'))
      } else {
        callback()
      }
    }
    let validaGradeYear = (rule, value, callback) => {
      if (!this.gradeYear) {
        callback(new Error('请选择级别'))
      } else {
        callback()
      }
    }
    let validaClassId = (rule, value, callback) => {
      if (!this.classId) {
        callback(new Error('请选择班级'))
      } else {
        callback()
      }
    }
    let validaCardNo = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入证件号码'))
      } else if (parseInt(this.form.idType) === 1) {
        if (!common.testCardIdEasy(value)) {
          callback(new Error('请输入正确的18位身份证号码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      options: [],
      area: {}, // 地区
      gradeYear: this.form.gradeYear,
      classId: this.form.classId,
      rules: {
        name: [
          { validator: validaName, trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' },
          { required: true, message: '请填写姓名', trigger: 'blur' }
        ],
        sex: [
          { validator: validaSex, trigger: 'change' }
        ],
        birth: [
        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        idType: [
          { validator: validaIdType, trigger: 'change' }
        ],
        cardNo: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
          { validator: validaCardNo, trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        gradeYear: [
          { validator: validaGradeYear, trigger: 'change' }
        ],
        classId: [
          { validator: validaClassId, trigger: 'change' }
        ],
        guardian: [
          { validator: validaGuardian, trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' },
          { required: true, message: '请填写父/母姓名', trigger: 'blur' }
        ],
        mobile: [
          { validator: validaPhone, trigger: 'blur' }
        ]
      }, // 表单校验规则
      gradeList: [], // 级别列表
      classList: [] // 班级列表
    }
  },
  created () {
    this.getClassList()
    if (this.type === 2) {
      this.form.idType = this.form.idType ? this.form.idType : 1
      this.form.sex = this.form.sex === 2 ? this.form.sex : 1
      this.form.birth = new Date(this.form.birth * 1000)
      this.area.province = this.form.province || ''
      this.area.city = this.form.city || ''
      this.area.county = this.form.county || ''
    }
  },
  props: {
    callback: {
      type: Function,
      required: true
    },
    form: {
      type: Object,
      default: function () {
        return {
          sex: 1,
          idType: 1
        }
      }
    },
    type: {
      type: Number,
      required: true
    }
  },
  methods: {
    getClassList (v) { // 获取班级列表
      getClassList().then(v => {
        this.gradeList = v.data
        if (this.type === 2) {
          let tmpGradeList = {}
          this.gradeList.forEach(v => {
            tmpGradeList[v.id] = v
          })
          this.classList = tmpGradeList[this.form.gradeYear].children
        } else {
          this.classList = v.data[v.data.length - 1].children
          this.gradeYear = v.data[v.data.length - 1].id
          this.classId = this.classList[0].id
          this.form.gradeYear = v.data[v.data.length - 1].id
          this.form.classId = this.classList[0].id
        }
      })
    },
    btnSave (index) { // 保存
      if (index === 4) {
        this.$router.go(-1)
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          // if (!this.area.province || !this.area.city || !this.area.county) {
          //   return this.$alert('请选择完整的家庭住址省市区信息', '提示', {
          //     confirmButtonText: '确定',
          //     callback: function () {}
          //   })
          // }
          let data = JSON.parse(JSON.stringify(this.form))
          data.birth = parseInt((new Date(data.birth).getTime()) / 1000)
          data.gradeYear = this.gradeYear
          data.classId = this.classId
          data.province = this.area.province || 0
          data.city = this.area.city || 0
          data.county = this.area.county || 0
          if (index === 1) {
            this.$refs.form.resetFields()
            this.form.gradeYear = 2017
            this.form.classId = 1
          }
          this.callback(data, index)
        } else {
          console.log('err submit!!')
        }
      })
    },
    handleTest () { // 省市区选框事件
      let tmp = this.selectedOption
      if (tmp.length === 1) {
        this.getCity(tmp[0])
      } else if (tmp.length === 2) {
        this.getCounty(tmp[0], tmp[1])
      }
    },
    gradeChange () { // 年级变化
      this.gradeList.forEach(v => {
        if (v.id === this.gradeYear) {
          this.classList = v.children
          this.classId = v.children[0].id
        }
      })
    },
    goPage () {
      this.$router.go(-1)
    }
  },
  components: {
    areaSelect
  }
}
</script>
<style lang="less" scoped>
  .info {
    padding-left: 20px;
    font-size: 14px;
    .head {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #bfcbd9;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
    }
  }
</style>

